<template>
  <AutoScroll
    :height="30 * partSize"
    @complete="handleComplete"
    @half="handleHalf"
  >
    <div
      class="item"
      v-for="(item, index) in partA"
      :key="`a${index}`"
    >
      <div class="itemText">
        <span>{{item.userName}}: </span>
        <span>{{item.blessing}}</span>
      </div>
    </div>
    <div
      class="item"
      v-for="(item, index) in partB"
      :key="`b${index}`"
    >
      <div class="itemText">
        <span>{{item.userName}}: </span>
        <span>{{item.blessing}}</span>
      </div>
    </div>
  </AutoScroll>
</template>

<script>
import { computed, onMounted, ref } from "vue";
import AutoScroll from "./AutoScroll";
export default {
  components: {
    AutoScroll,
  },
  setup(prop, cxt) {
    let items = ref([
      { userName: "老熊", blessing: "新婚快乐" },
      { userName: "小段", blessing: "新婚快乐" },
      { userName: "老王", blessing: "新婚快乐，百年好合" },
      { userName: "文姬", blessing: "新婚快乐" },
      { userName: "小张", blessing: "新婚快乐" },
      { userName: "大毛", blessing: "新婚快乐" },
      { userName: "老二", blessing: "新婚快乐" },
    ]);
    let partSize = ref(3);
    let partAStartIndex = ref(0);
    let partBStartIndex = ref(0);
    let partA = computed(() => {
      if (items.value.length > partSize.value) {
        return items.value
          .concat(items.value.slice(0, partSize.value))
          .slice(partAStartIndex.value, partAStartIndex.value + partSize.value);
      } else {
        return items.vlaue;
      }
    });
    let partB = computed(() => {
      if (items.value.length > partSize.value) {
        return items.value
          .concat(items.value.slice(0, partSize.value))
          .slice(partBStartIndex.value, partBStartIndex.value + partSize.value);
      } else {
        return [];
      }
    });
    onMounted(() => {
      partAStartIndex.value = 0;
      partBStartIndex.value = partAStartIndex.value + partSize.value;
    });
    const handleHalf = () => {
      partAStartIndex.value =
        (partBStartIndex.value + partSize.value) % items.value.length;
    };
    const handleComplete = () => {
      partBStartIndex.value =
        (partAStartIndex.value + partSize.value) % items.value.length;
    };
    return {
      items,
      partSize,
      partAStartIndex,
      partBStartIndex,
      partA,
      partB,
      handleHalf,
      handleComplete,
    };
  },
};
</script>

<style scoped lang='scss'>
/* item 总高度为30 */
.item {
  line-height: 30px;
}
.itemText {
  color: #FF8C00;
}
.itemText>span:nth-child(2) {
  margin-left: 5px;
}
</style>
